<template>
	<view class="fuwu">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<uni-nav-bar left-icon="back" backgroundColor="#fff" color="#101010" :fixed='true' right-text="编辑资料" title="人员详情" @clickRight="edit" @clickLeft="back"></uni-nav-bar>
		<view class="box">
			<view class="msg">
				<image :src="basicData.imgurl" mode=""></image>
				<view class="ziliao">
					<view class="line1">
						{{ basicData.person_name }}
						<text>好评率 </text>
						<text>{{ basicData.hp_rate }}%</text>
						
					</view>
					<view class="line2">
						ID:{{ basicData.sp_id }}
					</view>
					<view class="line3">{{ basicData.create_time }} 加入</view>
				</view>
			</view>
		</view>
		<view class="lb">
			<view class="lbItem">
				<view class="line1">{{basicData.this_num}}</view>
				<view class="line2">本月服务次数</view>
			</view>
			<view class="lbItem">
				<view class="line1">{{basicData.total_num}}</view>
				<view class="line2">累计服务次数</view>
			</view>
		</view>
		<view class="header">
		   服务订单记录
		</view>
		<!-- <mescroll-body> -->
			<view class="list">
				<view class="listItem" v-for="(item,index) in recordData_list" :key="index">
					<view class="time">
						<view class="type">订单编号:{{ item.order_bh }}</view>
						<view class="shijian">{{ item.create_time }}</view>
					</view>
					<view class="content">{{ item.serve_name }}</view>
					<view class="line">
						评分 <text>{{ item.person_scour }}</text>
					</view>
					<view class="hr"></view>
				</view>
				
			</view>
		
		
		<!-- </mescroll-body> -->
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				basicData:{},
				recordData_list:[],
				sp_id:''
			}
		},
		onLoad(e) {
			this.sp_id = e.sp_id
		},
		methods:{
			edit(){
				uni.navigateTo({
					url: '../../component/editFuwu/index?sp_id=' + this.basicData.sp_id
				})
			},
			back(){
				this.$router.go(-1)
			},
			serverData(){
				this.$store.dispatch("serverData",{sp_id:this.sp_id}).then(res=>{
					if(res.code==1){
						console.log(res)
						this.serverData_Data = res.data
						this.basicData = res.data.basic
						this.recordData_list = res.data.record
					}
				})
			}
		},
		created() {
			this.serverData()
		}
			
	}
</script>

<style lang="scss"scoped>
	.fuwu{
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		.box{
			padding: 28upx;
			background: white;
			padding-bottom: 0;
			.msg{
				width: 100%;
				height: 160upx;
			
				display: flex;
				image{
					height: 160upx;
					width: 160upx;
					
					}
					.ziliao{
						font-size:28upx;
						width: calc(100% - 200upx);
						margin-left: 40upx;
						color: #A4A8B7;
						.line1{
							font-size: 36upx;
							font-weight: 550;
							color: black;
							text{
								font-size:28upx;
								margin-left: 16upx;
								font-weight: normal;
								color: #A4A8B7;
								}
							
							}
							.line3{
								margin-top: 26upx;
								}
						
						}
				}
			}
			.lb{
			   width: 100%;
			   height: 160upx;
			   background: white;
			   border-radius: 6upx;
			   display: flex;
			   justify-content: space-around;
			   margin-bottom: 30upx;
			   .lbItem {
				   position: relative;
				   width: 50%;
				   text-align: center;
				   height: 100%;
				   .line1 {
					   margin-top: 36upx;
					   font-size:40upx;
				   }
					.line2 {
						margin-top: 10upx;
						color: #A4A8B7;
						font-size: 28upx;
					}
			   }
				}
				.header{
					line-height: 60upx;
					font-size: 32upx;
					font-weight: 550;
					padding-left: 28upx;
					margin: 10px 0;
				}
				.list{
					
						background: white;
						margin-bottom: 20upx;
						.listItem{
							width: calc(100% - 60upx);
						
							padding: 30upx;
							padding-bottom: 22upx;
							position: relative;
						
							.time{
								display: flex;
								justify-content: space-between;
								font-size: 24upx;
								margin-bottom: 22upx;
								color: #A4A8B7;
								
								}
								.content{
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 28upx;
									color: #262E34 10000%;
									font-weight: 600;
									
									}
									
										.line{
											font-size: 28upx;
											font-weight:500;
											margin-top: 6upx;
											font-weight: 600;
										text{
											margin-left: 10upx;
											
											
											}
												
											}
										
										
								  .hr {
										position: absolute;
										width: 95%;
										height:2upx;
										bottom:0upx;
										right: 0;
										background: #eee;
										margin-top: 50px;
										}
						}
					
					}
		
		}
</style>
